
<template>
  <div class="police-detail">
    <el-card>
      <div class="top-search">
        <el-form :model="queryParams" label-width="auto" :inline="true" ref="queryFormRef">
          <el-form-item label="告警等级" prop="level">
            <el-select v-model="queryParams.level" placeholder="请选择告警等级">
              <el-option v-for="dict in police_warn_level" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="告警状态" prop="status">
            <el-select v-model="queryParams.status" placeholder="请选择告警状态">
              <el-option v-for="dict in police_warn_status" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="handleQuery">查询</el-button>
            <el-button plain @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="table-content">
        <el-table ref="multipleTableRef" border :data="tableData" style="width: 100%" height="65vh"
         @selection-change="handleSelectionChange">
          <el-table-column property="name" label="组名" align="center" />
          <el-table-column property="alert" label="报警规则" align="center" />
          <el-table-column property="assetId" label="资产id" align="center" />
          <el-table-column property="alertSource" label="报警来源" align="center" />
          <el-table-column property="summary" label="告警描述" align="center" />
          <el-table-column property="description" label="详细信息" align="center" />
          <el-table-column property="level" label="告警等级" align="center" width="100">
            <template #default="{row}">
              <dict-tag :options="police_warn_level" :value="row.level" />
            </template>
          </el-table-column>
          <!-- <el-table-column property="status" label="告警状态" align="center" width="100">
            <template #default="{row}">
              <dict-tag :options="police_warn_status" :value="row.status" />
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="80">
            <template #default="{row}">
              <el-button link type="primary">解决</el-button>
            </template>
          </el-table-column> -->

        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
      </div>
      
    </el-card>
  </div>
</template>
   
<script setup lang="ts">
import { ref, reactive, toRefs } from 'vue';
import { ElTable } from 'element-plus';
import { getDetailListAPI } from '@/api/police/alarm-detail/index'

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { police_warn_level, police_warn_status } = toRefs<any>(proxy?.useDict('police_warn_level', 'police_warn_status'));

const queryFormRef = ref<ElFormInstance>();

const total = ref(1);
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    status: "",
    level: ""
  },
  unfoldFlag: false,
  tableData:<any[]> []
});
const { queryParams, unfoldFlag, tableData } = toRefs(data);

// 展开
const unfoldForm = () => {
  unfoldFlag.value = !unfoldFlag.value;
};

const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref([]);
const handleSelectionChange = (val: any) => {
  console.log(val);

  multipleSelection.value = val;
};

function handleQuery() {
  getList()
}

function resetQuery() {
  queryFormRef.value?.resetFields();
  queryParams.value.pageNum = 1
  handleQuery()
}

const getList = async() => {
  const res = await getDetailListAPI(queryParams.value)
  console.log("获取到的详情列表", res)
  tableData.value = res.rows||[]
  total.value = res.total
};

onMounted(()=>{
  getList()
})
</script>
  
  <style scoped lang="scss">
.police-detail {
  padding: 8px;
  width: 100%;
  height: 100%;
  .el-card {
    width: 100%;
    height: 100%;

    .table-content {
      width: 100%;
    }
  }
}
</style>